<template>
  <div class="tournament_list">
    <nut-tabs @change="tabChange" v-model="state.agentId" title-scroll title-gutter="10" v-if="gameTabList">
      <nut-tab-pane :title="item.name" :pane-key="item.id" v-for="item in gameTabList" :key="item.id">
        <TournamentCard :tournaments="tournamentList" />
      </nut-tab-pane>
    </nut-tabs>
    
    <LevitateBox />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import TournamentCard from "../components/tournamentCard.vue";
import LevitateBox from '../components/levitateBox.vue';

const state = reactive({
  // 游戏id  1为查看全部的游戏
  agentId: 1,

  // 自定义标签 0为全部 1为热门 -2为收藏，-3为最近
  lableId: 1,

})

const gameTabList = reactive([
  {
    id: 1,
    name: "全部",
  },
  {
    id: 2,
    name: "21点",
  },
  {
    id: 3,
    name: "德州",
  },
  {
    id: 4,
    name: "牛牛",
  },
  {
    id: 5,
    name: "黑杰克",
  },
]);

// 赛事列表数据
const tournamentList = ref([
  {
    round: "5张奥马哈", // 比赛回合
    prize: "$12,500,09", // 奖金
    name: "赛事IGO+·赛事名称", // 比赛名称
    startTime: new Date(new Date().getTime() + 8 * 60 * 60 * 1000).toISOString(), // 开始时间：8小时后
    buyIn: "免费", // 买入
    status: 0, // 比赛状态
    people: 1999, // 参赛人数
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  {
    round: "6张奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() + 4 * 60 * 60 * 1000).toISOString(), // 开始时间：4小时后
    buyIn: "免费",
    status: 0,
    people: 1999,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  {
    round: "奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() - 10 * 60 * 1000).toISOString(), // 开始时间：10分钟前
    buyIn: "免费",
    status: 2,
    people: 1200,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  {
    round: "5张奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() - 25 * 60 * 1000).toISOString(), // 开始时间：25分钟前
    buyIn: "免费",
    status: 4,
    people: 800,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  {
    round: "6张奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() - 2 * 60 * 60 * 1000).toISOString(), // 开始时间：2小时前
    buyIn: "免费",
    status: 3,
    people: 500,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  {
    round: "奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() - 6 * 60 * 60 * 1000).toISOString(), // 开始时间：6小时前
    buyIn: "免费",
    status: 5,
    people: 0,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
]);

const tabChange = (item: any) => {
  console.log('item', item)
}
</script>

<style scoped lang="scss">
.tournament_list {
  :deep(.nut-tabs__titles) {
    height: 36px;
  }
}
</style>
